<template>
  <div>
    <a-row type="flex" style="padding-left: 10%">
      <a-col flex="300px">
        <a-space :size="30">
          <a-avatar :size="120" shape="square" :src="$store.state.user.avatar" style="border-radius: 15px"/>
          <a-space direction="vertical" :size="15">
            <strong style="font-size: x-large;">{{$store.state.user.username}}</strong>
            <div>
              <a-badge v-if="$store.state.user.status===0" color="green" status="processing" text="正常"/>
              <a-badge v-if="$store.state.user.status===1" color="red" status="processing" text="封号中" />
            </div>
            <div>
              <a-badge v-if="$store.state.user.role===0" color="geekblue" status="processing" text="普通用户"/>
              <a-badge v-if="$store.state.user.role===1" color="gold" status="processing" text="管理员" />
            </div>
          </a-space>
        </a-space>
        <a-card style="margin-top: 20px; width: 300px; border-radius: 15px">
          <div style="margin-top: 10px">
            <a-button block @click="toEditUserInfoPage" type="primary" ghost>编辑个人信息</a-button>
          </div>
          <a-space direction="vertical" style="margin-top: 20px; text-align: left; width: 270px;">
            <strong style="font-size: medium;">个人简介</strong>
            <span class="profileSpan" :title="$store.state.user.profile">
              {{$store.state.user.profile === '' ? '这个用户很懒，什么都没有说~' : $store.state.user.profile.length > 50 ? $store.state.user.profile.substring(0, 50) + '...' : $store.state.user.profile}}
            </span>
            <div>
              <strong class="userInfoTitle">性别</strong>
              <span class="userInfoDetail" v-if="$store.state.user.gender===0">男</span>
              <span class="userInfoDetail" v-if="$store.state.user.gender===1">女</span>
              <span class="userInfoDetail" v-if="$store.state.user.gender===-1">保密</span>
            </div>
            <div>
              <strong class="userInfoTitle">电话</strong>
              <span class="userInfoDetail" :title="$store.state.user.phone">{{$store.state.user.phone}}</span>
            </div>
            <div>
              <strong class="userInfoTitle">微信</strong>
              <span class="userInfoDetail" :title="$store.state.user.email">
                {{$store.state.user.wxNum === null || '' ? '暂无数据' : $store.state.user.wxNum}}
              </span>
            </div>
            <div>
              <strong class="userInfoTitle">Q Q</strong>
              <span class="userInfoDetail" :title="$store.state.user.email">
                {{$store.state.user.qqNum === null || '' ? '暂无数据' : $store.state.user.qqNum}}
              </span>
            </div>
            <div>
              <strong class="userInfoTitle">邮箱</strong>
              <span class="userInfoDetail" :title="$store.state.user.email">
                {{$store.state.user.email === null || '' ? '暂无数据' : $store.state.user.email}}
              </span>
            </div>
            <div>
              <strong class="userInfoTitle">加入时间</strong>
              <span class="userInfoDetail">{{$store.state.user.createTime}}</span>
            </div>
          </a-space>
        </a-card>
      </a-col>
      <a-col style="margin-left: 20px">
        <a-card style="width: 1200px; height: 715px; border-radius: 15px">
          <a-table :columns="myGoodColumns" :data-source="myGoodList" :pagination=false rowKey="id">
                <span slot="img" slot-scope="img">
                  <a-avatar shape="square" :src="img" size="large"/>
                </span>
            <template slot="id" slot-scope="id" style="text-align: center">
              <a-button type="link" @click="toEditGoodPage(id)" size="small">修改</a-button>
              <a-popconfirm
                  title="确认删除BOT?"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="deleteGood(id)"
              >
                <a-button type="link" size="small" style="color: #e30101">删除</a-button>
              </a-popconfirm>
            </template>
          </a-table>
        </a-card >
        <a-card style="width: 1200px; border-radius: 15px; margin-top: 10px">
          <a-pagination
              v-model="page"
              :total="total"
              :show-total="total => `共 ${total} 条`"
              :page-size="pageSize"
              @change="pageChange"
              @showSizeChange="onShowSizeChange"
              slot="extra"
          >
          </a-pagination>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {deleteGoodById, getGoodListByMasterId} from "@/services/good"

const myGoodColumns  = [
  { title: '宝贝名称', width: 100, dataIndex: 'name', key: 'name', align: 'center'},
  { title: '图片', width: 80, dataIndex: 'img', key: 'img', scopedSlots: { customRender: 'img' }, align: 'center'},
  { title: '价格', dataIndex: 'price', key: 'price', width: 80 , align: 'center'},
  { title: '购买日期', dataIndex: 'purchaseDate', key: 'purchaseDate', width: 100, align: 'center'},
  { title: '描述', dataIndex: 'description', key: 'description', width: 200, ellipsis: true, align: 'center'},
  { title: '点赞', dataIndex: 'thumbs', key: 'thumbs', width: 80, align: 'center'},
  { title: '操作', key: 'operation', dataIndex: 'id', scopedSlots: { customRender: 'id' }, width: 150, align: 'center'}
]
export default {
  name: "MySpace",
  data() {
    return {
      myGoodColumns, // 表格列名
      myGoodList: [], // 我的商品列表
      // 分页参数
      total: 0,
      page: 1, // 对局当前页码
      pageSize: 8, // 对局每页显示条数
    }
  },
  mounted() {
    this.getMyGoodList()
  },
  methods: {
    // 获取我的商品列表
    getMyGoodList() {
      // 发送请求(8条每页)
      getGoodListByMasterId(this.page, this.pageSize).then(res => {
        if (res.code === 20000) {
          this.myGoodList = res.data.goodVoList
          this.total = res.data.total
        } else {
          console.log(res.message)
        }
      }).catch(() => {
        console.log('获取我的商品列表请求错误')
      })
    },
    // 编辑商品界面
    toEditGoodPage(id) {
      console.log(id)
      // 路由跳转到编辑商品界面
      this.$router.push(`/good/edit/${id}`)
    },
    // 删除商品
    deleteGood(id) {
      // todo
      deleteGoodById(id).then(res => {
        if (res.code === 20000) {
          this.$message.success('删除成功')
          this.getMyGoodList()
        } else {
          console.log(res.message)
        }
      }).catch(() => {
        console.log('删除商品请求错误')
      })
      console.log(id)
    },
    // 跳转到编辑用户信息界面
    toEditUserInfoPage() {
      // 路由跳转用户编辑界面
      this.$router.push('/my/edit')
    },
    // 分页方法
    // 每页显示条数变化（这个page变化页数底层用得到）
    onShowSizeChange(page, pageSize) {
      this.page = 1 // 回到第一页
      this.pageSize = pageSize
      this.getMyGoodList()// 查询数据
    },
    // 页码改变
    pageChange(page) {
      this.page = page
      this.getMyGoodList()
    },
  }
}
</script>

<style scoped>
.userInfoTitle {
  font-size: medium;
  margin-right: 17px
}
.userInfoDetail {
  font-size: medium;
  white-space: pre-line;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 150px;
  display: inline-block;
  vertical-align: top
}
.profileSpan{
  font-size: small;
  color: #93939b;
  white-space: pre-line;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 270px;
  display: inline-block;
  vertical-align: top
}
</style>
